<h4>管道（过滤器）</h4>
<pre class="note">
应用场景：对传递的数据进行数据处理，将处理后的新数据进行返回
应用语法：被处理数据 | 管道名[:参数1 [:参数2 [……] ] ]
应用特性：
    1、angular管道依然是以方法方式处理数据，但调用时不能使用 () 
    2、管道名称后可以以:方式添加多个额外参数，但参数存在彼此依赖
    3、管道可以使用于任何angular语法环境中，例如：插值表达式，指令……
</pre>
<pre class="note">
1、JsonPipe
    作用：实现对象数据的字符串格式化，封装了JSON.stringify方法的特殊功能
    场景：辅助开发时对于对象类型数据的内容快速查看和监控
    管道名：json
    语法: value_expression | json

</pre>
<pre>user: {{ user }}</pre>
<pre>user: {{ user | json }}</pre>
<input type="text" [(ngModel)]="user.name">
<pre>arr:{{ arr | json }}</pre>
<pre>arrObj:{{ arrObj | json }}</pre>
<pre class="note">
2、DecimalPipe
    作用：数值格式化管道，将数值变量依据一定格式规则，转换为字符串进行输出
    场景：对数值进行格式化操作，补0，四舍五入，保留多少位小数……
    管道名：number
    语法: value_expression | number [ : digitsInfo ]
    默认格式化规则:保留三位小数，四舍五入操作，整数位完成千分位操作
    参数：
        digitsInfo 描述被格式化后的数值结构
            取值类型 string	数字展现的选项，通过如下格式的字符串指定：
            minIntegerDigits.minFractionDigits-maxFractionDigits
            * minIntegerDigits：在小数点前的最小位数。默认为 1。如果不足的会补0操作
            * minFractionDigits：小数点后的最小位数。默认为 0。最小小数位 如果不足的会补0操作
            * maxFractionDigits：小数点后的最大为数，默认为 3。最大小数位
            + minIntegerDigits>=1   minFractionDigits>=0   maxFractionDigits>=minFractionDigits

</pre>
<p>num1原始值：{{num1}}</p>
<p>num1无参转换：{{ num1 | number }}</p>
<p>num2原始值：{{ num2 }}</p>
<p>num2有参转换(3.2-4):{{ num2 | number:"1.2-4" }}</p>
<input type="number" [(ngModel)]="num2">
<p>234.4567(只保留两位小数，如果不足补0)：{{ 234.4567 | number:"1.2-2" }}</p>
<p>234(只保留两位小数，如果不足补0)：{{234 | number:"1.2-2"}}</p>
<pre class="note">
3、PercentPipe
    作用：百分比格式化管道，将数值变量依据一定格式规则，转换为百分比字符串输出
    场景：应用于统计场景
    管道名：percent 
    语法: value_expression | percent [ : digitsInfo ]
    默认格式化规则:不保留小数位，实现四舍五入，整数位默认至少一位，千分位
    参数：digitsInfo定义规则和DecimalPipe定义规则一致
            格式化的是 value_expression*100 后的数据
</pre>
<p>num3原始值：{{num3}}</p>  
<p>num3原始值*100：{{num3*100}}</p>
<p>num3无参转换：{{ num3 | percent }}</p>
<p>num3有参转换(4.4-5):{{ num3 | percent:"4.4-5" }}</p>
<pre class="note">
4、CurrencyPipe
    作用：货币格式化管道，将数值变量依据一定格式规则，转换为货币字符串进行输出
    场景：用于购物网站的金额显示(完成货币符号转换==不做汇率计算)
    管道名：currency
    语法: value_expression | currency [ : currencyCode [ : display [ : digitsInfo ] ] ]
    默认格式化规则:小数位保留两位，四舍五入，千分位，货币符号
    参数：
        a、currencyCode 描述地区货币符号（地区+符号）
            + 货币代码 = ISO4217 全球货币统一编码
            + 自定义字符串 = 以定义的字符串作为获取符号直接拼接
        b、display 格式化货币符号规则
            + "code": 展示货币代码（如 USD）。
            + "symbol"(default): 展示货币符号(包含地区)（如 $）
            + "symbol-narrow": 只使用货币符号
            + String: 使用指定的字符串值代替货币代码或符号。 比如，空字符串将会去掉货币代码或符号。    
            + Boolean（从 v5 开始已弃用）：true 表示货币符号，false 表示货币代码。
        c、digitsInfo 定义规则和DecimalPipe定义规则一致
</pre>
<p>num2原始值：{{num2}}</p>
<p>num2+$:{{"$"+num2}}</p>
<p>num2无参：{{num2 | currency}}</p>
<p>num2-currencyCode：{{ num2 | currency:'人民币:' }}</p>
<p>num2-currencyCode：{{ num2 | currency:'￥' }}</p>
<p>num2-currencyCode：{{ num2 | currency:'CNY' }}</p>
<p>num2-currencyCode：{{ num2 | currency:'HKD' }}</p>
<p>num2-currencyCode：{{ num2 | currency:'EUR' }}</p>
<hr>
<p>display：boolean</p>
<p>num2-currencyCode-display：{{ num2 | currency:'CNY':true }}</p>
<p>num2-currencyCode-display：{{ num2 | currency:'CNY':false }}</p>
<p>display：string</p>
<p>num2-currencyCode:{{ num2 | currency:'人民币:' }}</p>
<p>num2-currencyCode-display：{{ num2 | currency:'CNY':"人民币:" }}</p>
<hr>
<p>num2-currencyCode-display:{{ num2 | currency:'CNY':"code" }}</p>
<p>num2-currencyCode-display：{{ num2 | currency:'CNY':"symbol" }}</p>
<p>num2-currencyCode-display：{{ num2 | currency:'CNY':"symbol-narrow" }}</p>
<hr>
<pre class="note">
5、DatePipe
    作用：对日期对象进行格式化操作的管道，以指定格式转换为字符串进行输出
    管道名：date
    语法: value_expression | date [ : format [ : timezone ] ]
    默认格式化规则: 月份 日期,年份
    取值：
        日期对象 = JS|TS 通过日期时间构造器创建的事件对象
        数值 =  可以接收 时间毫秒值
        ISO字符串日期 = 年/月/日 时:分:秒 
    参数：
        a、format 定义日期格式化规则，取值为一个就有固定意义的字符串
        b、timezone 定义当前在固定时区的时间，相当于本初子午线（参考事件）完成的时区偏转
            取值为string,必须包含时区符号（+ -）
</pre>
<p>day原始值：{{ day }}</p>
<p>day无参转换：{{ day | date }}</p>
<p>day参转换（年-月-日 时：分：秒）：{{ day | date:"yyyy-MM-dd HH:mm:ss" }}</p>
<p>day参转换（年-月-日）：{{ day | date:"yyyy-MM-dd" }}</p>
<p>day参转换（时：分：秒）：{{ day | date:"HH:mm:ss" }}</p>
<p>day参转换（年-月-日 时：分：秒）：{{ day | date:"yyyy年MM月dd日 HH:mm:ss" }}</p>
<hr>
<p>day参转换（年-月-日 时：分：秒）：{{ day | date:"yyyy年MM月dd日 HH:mm:ss":"+8" }}</p>
<p>day参转换（年-月-日 时：分：秒）：{{ day | date:"yyyy年MM月dd日 HH:mm:ss":"+12" }}</p>
<p>day参转换（年-月-日 时：分：秒）：{{ day | date:"yyyy年MM月dd日 HH:mm:ss":"-12" }}</p>
<hr>
<p>day参转换（年-月-日 时：分：秒）：{{ dayStr | date:"yyyy年MM月dd日 HH:mm:ss" }}</p>
<p>day参转换（年-月-日 时：分：秒）：{{ 1578561153568 | date:"yyyy年MM月dd日 HH:mm:ss" }}</p>
<pre class="note">
6、KeyValuePipe
    作用：将对象转换为可用于循环的数组
    管道名：keyvalue
    语法: input_expression | keyvalue [ : compareFn ]
    默认格式化规则: [ ｛　key:原对象的每个元素的key,value:原对象每个元素的value　｝ ]
    参数：
        compareFn 取值为function , 完成对象元素的排序操作
            取值为当前组件中的一个自定义方法名
            排序规则 等效于 JS 数组的 sort 方法的回调规则
</pre>
<pre>user原始:{{ user | json }}</pre>
<pre>user-keyvalue:{{ user | keyvalue | json }}</pre>
<ul>
    <li *ngFor="let en of user | keyvalue;">{{ en.key }}:{{ en.value }}</li>
</ul>
<hr>
<ul>
    <li *ngFor="let en of stus | keyvalue:sortFun;">{{ en.key }}:{{ en.value }}</li>
</ul>
<pre class="note">
angular自定义管道：
    1、手动构建
        a、定义一个用于承载管道的 class 类文件
        b、为定义管道类添加装饰器 @pipe 描述当前class类为angular项目中的一个自定义管道
           完成管道的基本配置
           @Pipe(｛
                // 当前管道的管道名称描述
                name:"rep"
            ｝)
        c、完成管道在 app.module.ts 中的注册（中央管理器的托管）
        d、完成管道类定义后，需要在管道中定义用于数据处理的特殊方法 transform 方法，
            实现管道模板调用时的会掉方法 = 可以通过 implements 完成 接口的实现 PipeTransform
        e、方法实现
            // transform(value: string, ...args: any[]) ｛
            transform(value: string, arg1:string,arg2:string) ｛
                /*
                    例子：｛｛ "12345" | rep:参数:参数 ｝｝
                    方法的参数
                        value 参数为当前管道被调用时 管道符号 左侧传入值
                            可以根据管道的功能自行进行修改
                        ...args 可变长数组，可以接收当前方法调用时的任意个数的形参
                                获取的是管道名称后面以 : 描述的多个额外参数
                            ==> 在项目开发中，如果能够明确管道的额外参数数量，
                                一般会将 ...args 参数展开为多个形参变量
                */
                // console.log("rep管道：",value,args);
                console.log("rep管道：",value,arg1,arg2);
                // 管道方法必须存在返回
                return "rep管道"
            ｝
    2、自动化：在存放目录下，通过执行 ng g pipe 管道名

</pre>
<p>自定义管道：{{ "1231312" | rep:",":"a" }}</p>
<p>自定义管道：{{ "123123123.1341231" | number | rep:reg:"":"g" }}</p>
<p>自定义管道调用：{{ 123456789.987 | number | rep:",":"" }}</p>
<p>自定义管道调用：{{ 123456789.987 | number | rep:",":"":"g" }}</p>
